<!-- 页面 -->
<template>
    <div class="imm">
        <el-row class="ka">
            <el-col>
                <el-card shadow="always">
                    <p>客户端注册</p>
                    账号:<el-input style="width: 80%;" v-model="account" placeholder="请输入账号/手机号"></el-input> <br> <br>
                    密码:<el-input style="width: 80%;" v-model="password" placeholder="请输入密码" show-password></el-input><br>
                    <span class="zc" @click="zhu()">返回登录</span>

                    <br>
                    <el-button style="width: 200px;" type="success" @click="add()">注册</el-button>


                </el-card>
            </el-col>
        </el-row>
    </div>
</template>
<!-- vue -->
<script>
export default {
    data() {
        return {
            // 声明的属性
            account: '',
            password: '',
        }
    },
    //生命周期函数
    mounted() {
    },
    // 调用方法
    methods: {
        add() {
            this.$axios.post('https://meituan.thexxdd.cn/apit/register', {
                account: this.account,
                password: this.password
            }).then(res => {
                console.log(res);
                if (res.status == 200) {
                    this.$message({
                        message: res.data.msg,
                        type: 'success'
                    });
                    this.$router.push('/dl')
                }else{
                    this.$message.error(res.data.msg);
                }
            })
        },
        zhu() {
            this.$router.push('/dl')
        }
    },
    // 监听器
    watch: {
    },
    // 计算属性
    computed: {
    },
    // 过滤器
    filters: {
    },
    // 自定义指令
    directives: {
    }
}
</script>
<!-- css样式 -->
<style>
.imm {
    width: 100vw;
    height: 100vh;
    background: url('https://artwork.starbucks.com.cn/banners-homepage-banner/main_85819d0d-0878-4e92-95a8-a944799b631e.png') no-repeat center center;
    background-size: 100% 100%;
}

.imm .ka {
    width: 450px;
    height: 270px;
    text-align: center;
    position: absolute;
    top: 40%;
    left: 40%;
}

p {
    font-size: 25px;
    text-align: center;
}

.zc {
    position: absolute;
    right: 10%;
    bottom: 30%;
}
</style>